<template>
  <section class="bg-gray-fa lg:pt-20 pt-9 lg:pb-12 pb-[30px] px-[10px]">
    <div class="container mx-auto">
      <div class="lg:text-3xl text-xl text-gray-33 font-bold text-center">
        适配多种硬件方案，插上网线就能用
      </div>
      <div class="lg:mt-4 mt-2 text-gray-66 lg:text-lg text-center">
        即插即用，支持软硬件全国产化
      </div>
      <ul
        class="
          gs_reveal gs_reveal_fromBottom
          lg:mt-16
          mt-4
          grid
          lg:grid-cols-2
          grid-cols-1
          lg:gap-8
          gap-3
          list-none
        "
      >
        <li
          v-for="item in list"
          :key="item.title"
          class="group bg-white hover:shadow rounded flex items-center"
        >
          <div
            class="
              lg:w-[120px] lg:h-[120px]
              bg-white
              px-3
              py-4
              lg:p-0
              group-hover:bg-red group-hover:-translate-y-6
              duration-500
              flex
              items-center
              justify-center
            "
          >
            <img :src="item.icon" class="ai-icon w-16 h-16" alt="" />
          </div>
          <div class="lg:ml-4 ml-3">
            <div class="mt-2 text-[#202020] lg:text-xl text-base font-semibold">
              {{ item.title }}
            </div>
            <div
              class="
                text-[#747F92] text-xs
                lg:text-sm lg:leading-7
                mt-1
                lg:mt-0
              "
            >
              {{ item.text }}
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import icon9 from "@/assets/img/ai-icon9.png";
import icon10 from "@/assets/img/ai-icon10.png";
import icon11 from "@/assets/img/ai-icon11.png";
import icon12 from "@/assets/img/ai-icon12.png";
import icon13 from "@/assets/img/ai-icon13.png";
import icon14 from "@/assets/img/ai-icon14.png";
export default {
  data() {
    return {
      list: [
        {
          icon: icon9,
          title: "集群服务器",
          text: "大规模算力，适用智慧城市",
        },
        {
          icon: icon10,
          title: "便携服务器",
          text: "通用型服务器可利旧，适配多种系统。",
        },
        {
          icon: icon11,
          title: "边缘盒子",
          text: "算力灵活，按需搭配 21/32/128/200/275 Tops",
        },
        {
          icon: icon12,
          title: "智能摄像头",
          text: "适配轻量级算法，任意算法自由选用。",
        },
        {
          icon: icon13,
          title: "无人机",
          text: "适配轻量级算法，任意算法自由选用。",
        },
        {
          icon: icon14,
          title: "机器狗",
          text: "适配轻量级算法，任意算法自由选用。",
        },
      ],
    };
  },
};
</script>

<style scoped>
/deep/ .group:nth-child(1):hover .ai-icon {
  content: url("@/assets/img/ai-icon9-w.png");
}

/deep/ .group:nth-child(2):hover .ai-icon {
  content: url("@/assets/img/ai-icon10-w.png");
}

/deep/ .group:nth-child(3):hover .ai-icon {
  content: url("@/assets/img/ai-icon11-w.png");
}

/deep/ .group:nth-child(4):hover .ai-icon {
  content: url("@/assets/img/ai-icon12-w.png");
}

/deep/ .group:nth-child(5):hover .ai-icon {
  content: url("@/assets/img/ai-icon13-w.png");
}

/deep/ .group:nth-child(6):hover .ai-icon {
  content: url("@/assets/img/ai-icon14-w.png");
}
</style>